﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no,email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="renderer" content="webkit" />
    <meta name="x5-fullscreen" content="yes" />
    <meta name="full-screen" content="yes" />
    <title>Title</title>
    <link href="../../../css/base/reset.css" rel="stylesheet" />
    <link href="../../../css/base/base.scss" rel="stylesheet" />
    <!--<link href="css/fonts/icomoon/style.css" rel="stylesheet" />-->
    <link href="../../../plugins/modal/modal.css" rel="stylesheet" />
    <!--<link href="../../../plugins/swiper3/swiper.min.css" rel="stylesheet" />-->
    <link href="../../../css/struct/custom.scss" rel="stylesheet" />
    <link href="../../../css/struct/layout.scss" rel="stylesheet" />
    <link href="../../../css/theme/honda/style.scss" rel="stylesheet" />
    <style>
        .modal-content a.btn-close-modal{
            position: absolute;
            top: -10px;
            right: 15px;
            width: 40px;
            height: 40px;
        }
    </style>
</head>
<body data-dismiss="modal">
    <div class="background"></div>
    <div class="wrapper">
        <div class="container exam-paper">
            <div class="game-levels">第一关</div>
            <div class="question">
                1.【单选题】第二个选项是正确的，其余都是错误的，点击图片选项选择后点下一题会有不同弹窗出现
            </div>
            <ul id="options" class="options section">
                <li data-option="1" data-toggle-class="checked" data-group="option">
                    <a href="javascript:;">
                        <img src="../../../images/honda/option.jpg" />
                    </a>
                </li>
                <li data-option="2" data-toggle-class="checked" data-group="option">
                    <a href="javascript:;">
                        <img src="../../../images/honda/option.jpg" />
                    </a>
                </li>
                <li data-option="3" data-toggle-class="checked" data-group="option">
                    <a href="javascript:;">
                        <img src="../../../images/honda/option.jpg" />
                    </a>
                </li>
                <li data-option="4" data-toggle-class="checked" data-group="option">
                    <a href="javascript:;">
                        <img src="../../../images/honda/option.jpg" />
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div id="modalAnswerRight" class="modal-wrapper">
        <div class="modal-container">
            <div class="modal-content">
                <div class="text-center">
                    <a href="javascript:;" class="btn-close-modal" data-dismiss="modal"></a>
                    <img width="85%" src="../../../images/honda/answer-right.png" />
                </div>
            </div>
        </div>
    </div>
    <div id="modalAnswerWrong" class="modal-wrapper">
        <div class="modal-container">
            <div class="modal-content">
                <div class="text-center">
                    <a href="javascript:;" class="btn-close-modal" data-dismiss="modal"></a>
                    <img width="85%" src="../../../images/honda/answer-wrong.png" />
                </div>
            </div>
        </div>
    </div>
    <script src="../../../js/jquery/jquery-1.11.2.js"></script>
    <script src="../../../js/react/react.min.js"></script>
    <script src="../../../js/react/react-dom.min.js"></script>
    <script src="../../../component/react/list.bak.jsx"></script>
    <script src="../../../js/fastclick/fastclick.js"></script>
    <script src="../../../plugins/modal/modal.js"></script>
    <!--<script src="../../../plugins/swiper3/swiper.jquery.min.js"></script>-->
    <script src="../../../js/global.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#options").on("click", "li", function(){
                var optionId = $(this).attr("data-option");
                if (optionId == 2){
                    $("#modalAnswerRight").modal();
                } else {
                    $("#modalAnswerWrong").modal();
                }
            });
            $(".modal-wrapper").on("modal.opening modal.opened modal.closing modal.closed", function (e) {
                console.log([e.type, e.namespace].join(" "));
            });
        })
    </script>
</body>
</html>